const tbodyBox = document.querySelector('.list');

const bsModal = new bootstrap.Modal(document.getElementById('modal'));

const addBox = document.querySelector('.bi.bi-plus');

const btnSubmitBox = document.querySelector('#submit');
const formBox = document.querySelector('#form');

let studentId = 0;

// 软件设计原则：开闭原则，对新增开放，对修改关闭  - 解耦

//1 ---------------------------------------=====操作数据 - 和服务器打交道====------------------------------
// 1. 向服务器获取学生列表数据
async function getStudentsData() {
  //!请不要缓存数据因为这个get不是幂等

  // const cacheData = getSession('studentsData');
  // if (cacheData) {
  //   return cacheData;
  // }
  try {
    let res = await axios({ url: '/students' });
    // 设置缓存
    // setSession('studentsData', res);
    // console.log(res);
    return res; // {message:'',data:[{}]}
  } catch (error) {
    pxmu.fail(
      (error.response && error.response.data.message) ||
        '获取学生数据异常，检查网络'
    );
  }
}

// 2. 完成学生编辑功能，相关的数据接口需要封装5个方法
// 2.1 获取省  - 无参
async function getProvinceData() {
  const cacheData = getSession('ProvinceData');
  // console.log(cacheData);
  // // 如果有缓存的话则直接使用缓存
  if (cacheData) {
    return cacheData;
  }
  try {
    let res = await axios({ url: '/api/province' });
    // 设置缓存
    setSession('ProvinceData', res);
    return res; // {message：'',list:['','']}
  } catch (error) {
    pxmu.fail(
      (error.response && error.response.data.message) ||
        '获取省份数据异常，检查网络'
    );
  }
}
// 2.2 获取市  - 需要传入省名称
async function getCityData(pname) {
  try {
    return await axios({ url: '/api/city?pname=' + pname }); // {message：'',list:['','']}
  } catch (error) {
    pxmu.fail(
      (error.response && error.response.data.message) ||
        '获取城市数据异常，检查网络'
    );
  }
}
// 2.3 区 -  - 需要传入省和市名称
async function getAreaData(pname, cname) {
  try {
    return await axios({ url: `/api/area?pname=${pname}&cname=${cname}` }); // {message：'',list:['','']}
  } catch (error) {
    pxmu.fail(
      (error.response && error.response.data.message) ||
        '获取地区数据异常，检查网络'
    );
  }
}
// 2.4 根据id获取学生的详情老数据
async function getStudentInfoData(id) {
  try {
    return await axios({ url: `/students/${id}` }); // {message：'',data:{}}
  } catch (error) {
    pxmu.fail(
      (error.response && error.response.data.message) ||
        '获取学生详情异常，检查网络'
    );
  }
}
// 2.5 修改学生的详情数据
async function putStudentInfoData(id, body) {
  try {
    return await axios({ url: `/students/${id}`, method: 'PUT', data: body }); // {message：'',data:[{},{}']}
  } catch (error) {
    pxmu.fail(
      (error.response && error.response.data.message) ||
        '获取学生详情异常，检查网络'
    );
  }
}
// 3 删除学生数据
async function deleteStudentData(id) {
  try {
    return await axios({ url: `/students/${id}`, method: 'DELETE' }); // {message：'',data:[{},{}']}
  } catch (error) {
    pxmu.fail(
      (error.response && error.response.data.message) ||
        '删除学生数据异常，检查网络'
    );
  }
}
// 4新增学生数据
async function postStudentInfoData(body) {
  try {
    return await axios({ url: '/students', method: 'POST', data: body }); // {message：'',data:[{},{}']}
  } catch (error) {
    pxmu.fail(
      (error.response && error.response.data.message) ||
        '新增学生数据异常，检查网络'
    );
  }
}
//2 --------------------------------------=====渲染界面 -- 和界面打交道=====-----------------------------
// 1. 渲染学生数据到表格中
async function renderStudents() {
  document.querySelector('.username').innerHTML = getLocal('username');
  let { data } = await getStudentsData();
  document.querySelector('.total').innerHTML = data.length;
  let str = '';
  data.forEach((item) => {
    str += `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender == 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${
          item.id
        }"></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id='${
          item.id
        }'></i></a>
        </td>
    </tr>
        `;
  });

  tbodyBox.innerHTML = str;
}

// 2. 渲染省，市，区三个数据到界面上
const provinceBox = document.querySelector('[name=province]');
async function renderProvince() {
  const { list } = await getProvinceData();
  let str = '';
  list.forEach((name) => {
    str += `<option value="${name}">${name}</option>`;
  });

  provinceBox.innerHTML = `<option value="">--省份--</option>${str}`;
}
const cityBox = document.querySelector('[name=city]');
async function renderCity(pname) {
  const { list } = await getCityData(pname);
  let str = '';
  list.forEach((name) => {
    str += `<option value="${name}">${name}</option>`;
  });

  cityBox.innerHTML = `<option value="">--城市--</option>${str}`;
}
const areaBox = document.querySelector('[name=area]');
async function renderArea(pname, cname) {
  const { list } = await getAreaData(pname, cname);
  let str = '';
  list.forEach((name) => {
    str += `<option value="${name}">${name}</option>`;
  });

  areaBox.innerHTML = `<option value="">--地区--</option>${str}`;
}

//3 -----------------------------------------====各种事件----和用户打交道====-----------------
//1.1 编辑与删除学生
function registerClickHanderForTbody() {
  tbodyBox.addEventListener('click', async function (e) {
    // 这个方法中即可做编辑也可以做删除
    // 如何判断现在是点击了编辑按钮
    if (e.target.className == 'bi bi-pen') {
      // alert('编辑')
      studentId = e.target.dataset.id;
      // alert(e.target.dataset.id)
      // 1. 根据id获取学生的老数据
      const { data } = await getStudentInfoData(studentId);

      // 2. 数据回显到页面
      for (key in data) {
        if (key == 'gender') {
          const genderBox = document.querySelectorAll(`[name=${key}]`);
          // console.log(genderBox);
          genderBox[data[key]].checked = true;
        } else {
          const box = document.querySelector(`[name=${key}]`);
          if (box) {
            box.value = data[key];
          }
        }
      }

      // 3. 显示用户所在的省，市，区
      let { province, city, area } = data;
      // console.log(province,city,area);
      provinceBox.value = province;

      await renderCity(province);
      // 回显城市
      cityBox.value = city;

      await renderArea(province, city);
      areaBox.value = area;

      // 打开模态框
      bsModal.show();
    }

    if (e.target.className == 'bi bi-trash') {
      studentId = e.target.dataset.id;
      pxmu
        .diaglog({
          congif: {
            animation: 'fade', //自定义动画 动画名详见动画文档
          },
        })
        .then(async (res) => {
          if (res.btn == 'right') {
            await deleteStudentData(studentId);
            renderStudents();
          } else {
            //点击了左侧按钮
          }
        });
    }
  });
}
// 2新增学生
addBox.addEventListener('click', function (e) {
  bsModal.show();
});
// 3. 注册省份和市区select的change事件
provinceBox.addEventListener('change', function (e) {
  // alert(e.target.value)
  // 1. 获取用户选择的省
  let pname = e.target.value;
  // 2. 调用 renderCity
  renderCity(pname);
});

cityBox.addEventListener('change', function (e) {
  // alert(e.target.value)
  // 1. 获取用户选择的省
  let cname = e.target.value;
  // 2. 调用 renderCity
  renderArea(provinceBox.value, cname);
});

btnSubmitBox.addEventListener('click', async function (e) {
  if (studentId > 0) {
    //  收集表单数据
    let body = getPostData();
    // 调用putStudentInfoData完成数据的修改
    await putStudentInfoData(studentId, body);
    //  关闭模态框+刷新列表数据
    bsModal.hide();
    studentId = 0;
    renderStudents();
  } else {
    // 新增
    let data = getPostData();
    console.log(data);
    await postStudentInfoData(data);
    pxmu.toast('新增成功');
  }
});

// 4-----------------------------------==== 页面进入时，各种方法调用初始化====----------------
renderStudents();
registerClickHanderForTbody();
renderProvince();
